import Taro, { Component } from '@tarojs/taro'
import {View, Text, ScrollView } from '@tarojs/components'
import { IconFont } from '@components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/address'
import { getWindowHeight } from '@utils/style'
import jump from '@utils/jump'
import { setGlobalData } from '@store/global_data'

import './address.scss'

@connect(state => state.address, actions)
class Address extends Component {
  config = {
    navigationBarTitleText: '地址管理'
  }

  constructor (props) {
    super(props)
  }

  componentDidShow() {
  	this.props.dispatchAddress()
  }

  handleClick = (addressId) => {
    //返回之前，先取出上一页对象，并设置addressId
    let pages = Taro.getCurrentPages()
    let prevPage = pages[pages.length - 2]
    if (prevPage.route == "pages/orderSettlement/orderSettlement") {
      setGlobalData('orderSettlement-addressId', addressId)
      Taro.navigateBack();
    } else {
      jump({
        url: '/pages/addressAdd/addressAdd',
        payload: {
          id: addressId
        }
      })
    }
  }

  handleDelete = (addressId) => {
    Taro.showModal({
      title: '',
      content: '确定删除地址？',
    })
      .then(res => {
        if (res.confirm) {
          this.props.dispatchAddressDel({id: addressId}).then(() => {
            this.props.dispatchAddress()
          })
        }
      })
  }

  handleAdd = () => {
    jump({
      url: '/pages/addressAdd/addressAdd'
    })
  }

  render () {
    const { addressList = []} = this.props
    const isEmpty = !addressList.length
    const height = getWindowHeight(false)
  	return (
  	  <View className='address'>
        <ScrollView
          scrollY
          className='address__wrap'
          style={{ height }}
        >
    	  	{isEmpty &&
            <View className='address__empty'>
              <Text className='address__empty-txt'>暂无收货地址</Text>
            </View>
    	  	}

    	  	{!isEmpty &&
            <View className='address__list'>
              {addressList.map((item) => (
                <View className='address__list-item' key={item.id}>
                  <View className='address__list-l' onClick={this.handleClick.bind(this,item.id)}>
                    <View className='address__list-name'>{item.name}</View>
                    {item.defaulted && <View className='address__list-default'>默认</View> }
                  </View>
                  <View className='address__list-c' onClick={this.handleClick.bind(this,item.id)}>
                    <View className='address__list-mobile'>{item.phone}</View>
                    <View className='address__list-address'>{item.province + item.city + item.county + item.address}</View>
                  </View>
                  <View className='address__list-r' onClick={this.handleDelete.bind(this,item.id)}>
                    <IconFont name='delete' size={40}></IconFont>
                  </View>
                </View>
              ))}
            </View>
    	  	}
        </ScrollView>

  	  	<View className='address-add-btn' onClick={this.handleAdd}>新建地址</View>
  	  </View>
  	)
  }
}

export default Address
